<template>
	<form @submit.prevent="addFilterHandler" @keyup.stop>
		<table class="table">
			<tbody>
				<tr>
					<td>单列运算逻辑</td>
					<td>
						<span class="select">
							<select v-model="logicOperator">
								<option value="and">且</option>
								<option v-show="!curFilterTagListCount == 0" value="or">或</option>
							</select>
							<p class="val_mask">{{ getLogicOperatorWords(logicOperator)}}</p>
						</span>
					</td>
					<td>
						<p class="col_placeholder" @click="showColSelectDialog">{{operatorCol.length === 0 ? "请选择列" : getCharCol(operatorCol[0])}}</p>
					</td>
					<td>
						<span class="select">
							<select v-model="operator">
								<option v-for="op in filterOptions" 
									:value="op.char">
									{{ op.words }}
								</option>
							</select>
							<p class="val_mask">{{ getOperatorWords(filterOptions, operator) }}</p>
						</span>
					</td>
					<td class="placeholder_td"></td>
					<td>
						<input type="text" placeholder="请填写运算符的值" 
							:disabled="operator === 'empty' || operator === 'notEmpty'" 
							v-model="operatorVal">
					</td>
					<td>
						<group-select :group-id="groupId" @changeSelect="changeSelHandler"></group-select>
					</td>
					<td>
						<button type="submit">添加</button>
					</td>
				</tr>
			</tbody>
		</table>
	</form>
</template>

<script>
	import { addFilter, setColSelectDialogStatus, setColSelectType } from '../../vuex/actions'
	import { getActiveSheet, getFilterOptions, getCurFilterTagListCount, getCurColCount } from '../../vuex/getters'
	import { getCharCol, getLogicOperatorWords, getOperatorWords, getFilterWordsPrimitive } from '../../utils/ExcelSet'
	import GroupSelect from './GroupSelect'
	import { ipcRenderer } from 'electron'

	export default {
		components: {
			GroupSelect
		},
		data(){
			return {
				operatorVal: '',
				operatorCol: [],
				operator: '>',
				subFilterOperator: '',
				logicOperator: 'and',
				groupId: -1
			}
		},
		vuex: {
			getters: {
				activeSheet: getActiveSheet,
				filterOptions: getFilterOptions,
				curColCount: getCurColCount,
				curFilterTagListCount: getCurFilterTagListCount
			},
			actions: {
				setColSelectDialogStatus,
				setColSelectType,
				addFilter
			}
		},
		mounted() {
			window.eventBus.$on('colSelVal4Single', (colSelectGroup) => {
				this.operatorCol = colSelectGroup
			})
		},
		watch: {
			curFilterTagListCount(){
				if(this.curFilterTagListCount == 0) {
					this.logicOperator = 'and'
				}
			},
			operator() {
				if(this.operator === 'empty' || this.operator === 'notEmpty') {
					this.operatorVal = undefined
				}
			}
		},
		methods: {
			getCharCol,
			getLogicOperatorWords,
			getOperatorWords,
			getFilterWordsPrimitive,
			changeSelHandler(groupId) {
				this.groupId = groupId
			},
			showColSelectDialog() {
				this.setColSelectType(0)
				this.setColSelectDialogStatus(true)
			},
			addFilterHandler() {
				let filterObj = {},
						filterWords = '',
						curCol = this.operatorCol,
						operator = this.operator,
						operatorWords = this.getOperatorWords(this.filterOptions, operator),
						opVal = this.operatorVal && this.operatorVal.trim()

				if(!this.validateForm({curCol, opVal})) {
					return
				}

				let preStr = `第${this.getCharCol(curCol)}列的值`
				filterWords = preStr + this.getFilterWordsPrimitive({
					operator,
					operatorWords,
					val: opVal
				})

				filterObj = {
					filterType: 0,
					groupId: this.groupId,
					logicOperator: this.logicOperator,
					col: curCol - 1,
					operator: this.operator,
					value: opVal,
					filterWords: filterWords
				}
				console.log('filterObj', filterObj)
				this.addFilter(filterObj)
				this.operatorVal = ''
				this.operator = '>'
				this.operatorCol = []
				this.groupId = -1
			},
			validateForm(args) {
				let { curCol, opVal } = args,
						isValidated = false,
						tipWords = '单列运算逻辑：'
				console.log('opVal', opVal)
				if(curCol.length === 0) {
					tipWords += '请选择列'
				}else if(opVal !== undefined && opVal.length === 0) {
					console.log("哈哈哈")
					tipWords += '请填写运算符的值'
				}else {
					isValidated = true
				}

				if(!isValidated) {
					ipcRenderer.send('sync-alert-dialog', {
						content: tipWords
					})
					return false
				}else{
					return true
				}
			}
		}
	}

</script>

<style lang="scss" scoped>
	
</style>